@layout("/backend/common/_container.html"){
<#Hidden id="dataId" value="${data!}"/>
<body>

<div id="QCDetail" style="width:90%;height:90%;"></div>
</body>
<script type="text/javascript" src="${ctxPath}/static/common/js/echarts.min.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
    var obj = new Object();
    $(function () {
        // 解析整个页面
        $.parser.parse();

        obj.showQCDetail();
    });
    var QCRows = $("#dataId").val();
    var data = JSON.parse(QCRows);

    obj.showQCDetail = function () {
        var dataArr = data.qcDetail
        var datalen = dataArr.length
        var dataobj = []
        for (var i = 0; i < datalen; i++) {
            var row = dataArr[i]
            var tobj = new Object()
            tobj.value = row.count
            tobj.name = row.description
            dataobj.push(tobj)
        }
        dataobj = dataobj.slice(0, 10);
        var xdata = []
        var ydata = []
        dataobj.forEach(function (item, index) {
            xdata.push(item.name);
            ydata.push(item.value);
        });
        var myChart = echarts.init(document.getElementById('QCDetail'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: row.patName + '质控项目触发统计',
                left: 'center'
            },
            tooltip: {},
            legend: {
                left: 'center',
                top: 'bottom',
            },
            grid: {
                left: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                max: 'dataMax'
            },
            yAxis: {
                type: 'category',
                data: xdata,
                inverse: true
            },
            series: [
                {
                    name: '质控条目触发数量',
                    realtimeSort: true,
                    type: 'bar',
                    data: ydata,
                    barMaxWidth: '20px',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ])
                    },
                }
            ]
        };
        myChart.setOption(option);
    };
</script>
@}